<template>
  <div class="index">
    <heads title="订单详情" :LeftArrow="true"></heads>
    <div class="main-content">
      <!--  -->
      <van-cell-group>
        <van-cell title="订单编号" :value="detail.orderNo" />
        <van-cell title="下单时间" :value="detail.createTime" />
      </van-cell-group>

      <!-- end -->
      <van-cell-group>
        <van-cell>
          <template #default>
            <div class="flex space-between item-adress">
              <div class="item-adress-left">
                <h1>{{ detail.name }}</h1>
                <p>{{ detail.adress }}</p>
              </div>
              <div class="color-primary" @click="goMap">导航</div>
            </div>
          </template>
        </van-cell>
      </van-cell-group>

       <van-cell-group class="item-contact">
        <van-cell>
          <template #title>
             <div class="flex flex-start">联系电话 <span>{{ detail.phone }}</span></div>
          </template>
          <template #default>
             <a :href="`tel:${ detail.phone }`" class="color-primary">拨打电话</a>
          </template>
        </van-cell>
      </van-cell-group>

      <!--  -->
      <van-cell-group class="item-other">
        <van-cell title="回收类别" :value="detail.classType" />
        <!-- <van-cell title="期望上门时间" :value="detail.expectTime" /> -->
        <van-cell title="备注" :value="detail.note" />
      </van-cell-group>

      <!-- end -->

    </div>
  </div>
</template>

<script>
import Mock from "mockjs";
import Vue from "vue";
import { Dialog,Toast } from 'vant';

// 全局注册
Vue.use(Dialog,Toast);
export default {
  components: {
    heads: resolve => require(["@/components/common/heads"], resolve)
  },
  data() {
    return {
      detail: {}
    };
  },

  methods: {
    // 数据
    getDetail() {
      this.detail = Mock.mock({
        "id|+1": 1,
        status: "2", //0默认（可抢单） 1未完成 2已完成
        orderNo: "@ctitle(10)",
        createTime: "@date()",
        name: "@ctitle()",
        adress: "@ctitle(10)",
        classType: "@ctitle(4)",
        expectTime: "@date()",
        note: "@ctitle(100)",
        price: "12",
        phone:'13694575445',
        "process|10": [
          {
            time: "@datetime()",
            title: "@ctitle(20)"
          }
        ]
      });

      // _this.$ajax
      //       .post(`${_this.$baseUrl}/activity/activityUser`, params)
      //       .then(function(res) {
      //         if (res.data.code == 200) {
      //            _this.$store.commit({type:'EnrollState',parma:res.data.data});
      //           _this.$router.push({ path: "/Success", query: {} });

      //         }
      //       })
      //       .catch(function(error) {
      //         console.log(error);
      // });
    },
    //导航
    goMap() {},
    //抢单
    goOrder() {
      this.$ajax
        .post(`${this.$baseUrl}/activity/activityUser`)
        .then(function(res) {
          if (res.data.code == 200) {
            this.$store.commit({ type: "EnrollState", parma: res.data.data });
            this.$router.push({ path: "/Success", query: {} });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //完成订单（快递员）
    finishOrder(){

      Dialog.confirm({
  title: '提示',
  message: '确认我未完成该订单吗?',
})
  .then(() => {
    // on confirm
     this.$ajax
        .post(`${this.$baseUrl}/activity/activityUser`)
        .then(function(res) {
          if (res.data.code == 200) {
            Toast('已完成该订单')
            setTimeout(() => {
              this.$router.push({path:'/gladOrderList'})

            },2000)
          }
        })
        .catch(function(error) {
          console.log(error);
        });
  })
  .catch(() => {
    // on cancel
  });
     
    }
  },
  created() {
    //获取详情数据
    this.getDetail();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.main-content {
  padding: 0.3rem;
  box-sizing: border-box;
  font-size: 0.28rem;
  margin-top: 0;
  padding-bottom: 1.3rem;
  /deep/ .van-cell-group {
    margin-bottom: 0.3rem;
    border-radius: 0.1rem;
     .cell-title {
      font-size: 0.3rem;
      padding: 0.1rem 0;
      i {
        font-size: 0.24rem;
        color: #999;
        padding-left: 0.3rem;
      }
     }
    .van-cell__value {
      flex: 2;
    }
    &.item-contact{
      .van-cell__title{
        flex: 1.2;
        span{
          padding-left: .3rem;
        }
      }
      .van-cell__value {
      flex: 1;
    }
    
    }
    &.item-other {
      .van-cell__value {
        span {
          color: #333;
        }
      }
    }
    .van-cell {
      color: #999;
      background: transparent;
      font-size: .3rem;
      .van-cell__title {
        text-align: left;
        justify-content: flex-start;
      }
      .item-adress {
        font-size: 0.3rem;
        color: inherit;
        .item-adress-left {
          flex: 1;
          margin-right: 0.3rem;
          border-right: 1px solid #d8d8d8;
        }
        h1,
        p {
          font-size: inherit;
          color: #999;
        }
      }
      .item {
        font-size: 0.3rem;
        color: #999;
        justify-content: flex-start;
        &.order-progress {
          .key {
            width: 100px;
          }
        }
        .key {
          // width: 50px;
        }
        .value {
          flex: 1;
        }
      }
    }
  }

  .footer-bar {
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.1rem 0.3rem;
    box-sizing: border-box;
    z-index: 10;
    .foot-left {
      color: #999;
      text-align: left;
      h1 {
        font-size: inherit;
        color: #333;
        .red {
          color: #dd0909;
        }
      }
    }
    .btn-order {
      background: #dd0909;
      color: #fff;
      border-radius: 0.44rem;
      min-width: 3.04rem;
      line-height: 0.8rem;
      font-size: 0.34rem;
    }
  }
  .btn-box{
    padding-top: 2rem;
    button{
      border-radius: .88rem;
      background: #34AD2A;
      border-color: #34AD2A;
    }
  }
}
</style>
  